<template>
    <div class="main">
      <div class="headMain">
        <div class="headBox">
          <div class="leftBox">
            <img :src="require('@/assets/img/LOGO.png')" alt="">
            <div class="leftBox-title">汇创青春大赛<br />赛事管理平台</div>
          </div>
          <div class="rightBox">
            <div>
              <el-input class="searchBox" style="border: 1px solid #ec7a3f;" placeholder="请输入关键字" v-model="input3">
                <el-button style="background: #ec7a3f; color: #fff; border-radius: 0%; border: 1px solid #ec7a3f;margin: -10px -22px;" type="warning" slot="append">搜索</el-button>
              </el-input>
            </div>
            <div class="loginlogo">
              <img :src="require('@/assets/img/huilogo.png')" alt="">
            </div>

          </div>
        </div>
      </div>
      <div class="swiperBox">
        <el-carousel class="swiperBox-m" loop  :interval="4000">
          <el-carousel-item class="swiperBox-m-01" v-for="(item, index) in swiperList" :key="index">
            <img class="banner" :src="item.url" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="moduleBox">
        <div class="moduleBox-item">
          <div class="moduleBox-item-left">
            <img :src="require('@/assets/img/B-1.png')" alt="">
          </div>
          <div class="moduleBox-item-right">
            <div class="moduleBox-item-right-01">参赛报名与作品提交</div>
            <div class="moduleBox-item-right-02">初评材料提交</div>
            <div class="moduleBox-item-right-02">终评材料提交</div>
          </div>
        </div>
        <div class="moduleBox-item">
          <div class="moduleBox-item-left">
            <img :src="require('@/assets/img/b-2.png')" alt="">
          </div>
          <div class="moduleBox-item-right">
            <div class="moduleBox-item-right-01">专家评审入口</div>
            <div class="moduleBox-item-right-02">作品初评</div>
            <div class="moduleBox-item-right-02">作品终评</div>
          </div>
        </div>
        <div class="moduleBox-item">
          <div class="moduleBox-item-left">
            <img :src="require('@/assets/img/b-3.png')" alt="">
          </div>
          <div class="moduleBox-item-right">
            <div class="moduleBox-item-right-01">基础信息管理</div>
            <div class="moduleBox-item-right-02">校级负责人信息统计</div>
            <div class="moduleBox-item-right-02">专家推荐</div>
          </div>
        </div>

      </div>

      <div class="tabs">
        <div :class="[idx == index ? 'tabs-item active':'tabs-item']" v-for="(item, index) in tabList" @click="toggleNav(index)">
          {{ item.title }}
          <div v-if="idx == index" class="line"></div>
        </div>
      </div>
      <div class="content">
        <div class="content-main">
          <div class="line2">
            <img :src="require('@/assets/img/xian-4.png')" alt="">
          </div>
          <div class="content-main-con" v-if="idx == 0" v-html="intro"></div>
          <div class="content-main-con" v-if="idx == 1" v-html="attach"></div>
          <div class="content-main-con" v-if="idx == 2" v-html="other"></div>
        </div>
      </div>
      <div class="schoolBox">
        <div :class="[idx2 == index ? 'tabs-item active':'tabs-item']" v-for="(item, index) in tabList2">
          {{ item.title }}
          <div v-if="idx2 == index" class="line"></div>
        </div>       
      </div>
      <div class="schoolBox-img">
        <img :src="require('@/assets/img/logo-he.jpg')" alt="">
      </div>
      <div class="schoolBox">
        <div :class="[idx2 == index ? 'tabs-item active':'tabs-item']" v-for="(item, index) in tabList3">
          {{ item.title }}
          <div v-if="idx2 == index" class="line"></div>
        </div>       
      </div>
      <div class="videoBox">
        <video class="videoMain" controls>
          <source src="movie.mp4" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
          您的浏览器不支持 HTML5 video 标签。
        </video>
        <img class="cover" :src="require('@/assets/img/video.jpg')" alt="">
      </div>
      <div class="textBox">
        <div class="textBox-txt1">了解更多</div>
        <div class="textBox-txt2">获取关于第九届汇创青春大赛评比结果及更多信息</div>
        <div class="textBox-txt3" @click="go">
          <img :src="require('@/assets/img/anniu.jpg')" alt="">
        </div>
      </div>
      <div class="footer">
        沪公安备案：31011702005281 ICP备09044195-1 沪互联网信息举报中心 版权所有@上海视觉艺术学院
      </div>


    </div>
  </template>
  
  <script>
  
  export default {
    name: "Login",
    data() {
      return {
        input3: '',

        swiperList: [{
          name: 'xx',
          url: require('@/assets/img/banner1.jpg')
        },{
          name: 'xx',
          url: require('@/assets/img/banner1.jpg')
        },{
          name: 'xx',
          url: require('@/assets/img/banner1.jpg')
        }],


        tabList: [
          {
            title: "详细介绍",
            name: 0
          },
          {
            title: "附件清单",
            name: 1
          },
          {
            title: "其他",
            name: 2
          }
        ],
        idx: 0,


        tabList2: [
          {
            title: "参与院校",
            name: 0
          }
        ],
        idx2: 0,
        tabList3: [
          {
            title: "评审回顾",
            name: 0
          }
        ],
        idx3: 0,


        intro: '详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍详细介绍',
        attach: '附件清单',
        other: '其他'

      };
    },
    mounted(){

    },
    methods: {
      toggleNav(index){
        this.idx = index
      },
      go(){
        this.$router.push('/detail')
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  @media (min-width: 768px) {
    /* 全局样式，会影响所有滚动条 */
    ::-webkit-scrollbar {
      width: 5px; /* 垂直滚动条的宽度 */
      height: 12px; /* 水平滚动条的高度 */
    }
    
    ::-webkit-scrollbar-track {
      background: #f4f4f4; /* 滚动条轨道的背景色 */
    }
    
    ::-webkit-scrollbar-thumb {
      background: #f27c35; /* 滚动条实际可拖动部分的背景色 */
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: #f27c35; /* 鼠标悬浮时滚动条的背景色 */
    }
    /* 只修改.custom-scrollbar类所指定的容器的滚动条样式 */
    .content-main-con::-webkit-scrollbar {
      width: 5px;
      height: 12px;
    }
    
    .content-main-con::-webkit-scrollbar-track {
      background: #f4f4f4;
    }
    
    .content-main-con::-webkit-scrollbar-thumb {
      background: #f27c35;
    }
    
    .content-main-con::-webkit-scrollbar-thumb:hover {
      background: #f27c35;
    }
    .main{
      width: 100%;
      // min-width: 1180px;
      margin: auto;
      .headMain{
        box-sizing: border-box;
        padding: 20px 40px;
        width: 100%;
        .headBox{
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .leftBox{
            display: flex;
            align-items: center;
            img{
              width: 300px;
              display: block;
            }
            .leftBox-title{
              font-style: italic;
              font-size: 28px;
              font-weight: bold;
              letter-spacing: 4px;
              margin-left: 20px;
            }
          } 
          .rightBox{
            display: flex;
            align-items: center;
            .searchBox{

            }
            .loginlogo{
              margin-left: 40px;
              img{
                width: 100px;
                cursor: pointer;
              }
            }
          }
        }
      }
      .swiperBox{
        
        .banner{
          width: 100%;
          height: 667px;
          cursor: pointer;
        }
        .swiperBox-m{
          height: 667px;
          .swiperBox-m-01{
            height: 667px;
            .banner{
              width: 100%;
              height: 667px;
            }
          }
        }
        // & >>> .el-carousel__indicators{
        //   // position: relative;
        //   // top: -20px;
        // }
      }
      .swiperBox::v-deep .el-carousel__indicators .is-active .el-carousel__button{
        background: #f27c35 !important;
      }
      .moduleBox{
        width: 1280px;
        margin: auto;
        display: flex;
        box-sizing: border-box;
        padding: 40px 0;
        .moduleBox-item{
          width: 33.33%;
          display: flex;
          align-items: center;
          justify-content: center;
          .moduleBox-item-left{
            img{
              width: 100px;
            }
          }
          .moduleBox-item-right{
            margin-left: 20px;
            .moduleBox-item-right-01{
              font-size: 24px;
              color: #eebf6a;
              font-weight: 500;
            }
            .moduleBox-item-right-02{
              font-size: 18px;
              margin-top: 10px;
              font-weight: 500;
            }
          }
        }
      }
      .tabs{
        width: 1280px;
        margin: auto;
        display: flex;
        box-sizing: border-box;
        padding: 20px 0 20px 0;
        .tabs-item{
          width: 33.33%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          color: #000;
          font-weight: 500;
          cursor: pointer;
          position: relative;
          .line{
            position: absolute;
            width: 70px;
            height: 6px;
            bottom: -20px;
            background: #f27c35;
            border-radius: 5px;
          }
        }
        .active{
          color: #f27c35 !important;
        }
      }
      .content{
        width: 100%;
        border-top: 1px solid #eee;
        .content-main{
          width: 1280px;
          margin: auto;
          display: flex;
          .line2{
            background: #f4f4f4;
            width: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 200px;
            img{
              width: 18px;
            }
          }
          .content-main-con{
            box-sizing: border-box;
            padding: 20px 30px;
            overflow-y: auto;
            height: 500px;
          }
        }
      }
      .schoolBox{
        width: 1280px;
        margin: auto;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        padding: 40px 0 20px 0;
        .tabs-item{
          width: 33.33%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          color: #000;
          font-weight: 500;
          cursor: pointer;
          position: relative;
          .line{
            position: absolute;
            width: 70px;
            height: 6px;
            bottom: -20px;
            background: #f27c35;
            border-radius: 5px;
          }
        }
        .active{
          color: #f27c35 !important;
        }
      }
      .schoolBox-img{
        width: 1280px;
        margin: auto;
        margin-top: 30px;
        img{
          width: 100%;
        }
      }
      .videoBox{
        width: 1280px;
        margin: auto;
        margin-top: 30px;
        position: relative;
        .videoMain{
          width: 100%;
          height: 500px;
        }
        .cover{
          width: 100%;
          height: 500px;
          position: absolute;
          top: 0;
          left: 0;
          cursor: pointer;
        }
      }
      .textBox{
        .textBox-txt1{
          font-size: 24px;
          color: #f27c35;
          font-weight: 500;
          text-align: center;
          margin-top: 40px;
        }
        .textBox-txt2{
          font-size: 18px;
          color: #000;
          text-align: center;
          margin-top: 20px;
        }
        .textBox-txt3{
          display: flex;
          justify-content: center;
          margin-top: 20px;
          img{
            width: 150px;
            cursor: pointer;
            &:hover{
              opacity: 0.8;
            }
          }
        }
      }
      .footer{
        width: 100%;
        background: url('~@/assets/img/dbu.jpg') no-repeat;
        background-size: 100% 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 70px;
        color: #fff;
        font-size: 20px;
      }
      
    }
    
  }
  
  </style>
  